<template>
	<view class="paymentBox">
		<uv-navbar title="订单详情" @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF"></uv-navbar>
		<view class="orderInfo">
			<text>订单编号：{{orderdetail.order_sn}}</text>
			<text class="t2">
            {{orderdetail.status==0?'待确认':orderdetail.status==1?'未支付':orderdetail.status==2?'已支付':'已完成'}}
            </text>
		</view>
		<view class="addressBox">
			<view class="a_Title">
				<text>{{orderdetail.area_oring}}</text>
				<image src="../../static/images/i1.png" mode=""></image>
				<text>{{orderdetail.area_dest}}</text>
			</view>
			<view class="a_info">
				<view class="item_info">
					<view class="i1">
						发运日期：{{orderdetail.time}}
					</view>
					<view class="i1">
						提交时间：{{orderdetail.createtime}}
					</view>
				</view>
				<view class="item_info">
					<view class="i1">
						委托人姓名：{{orderdetail.name}}
					</view>
					<view class="i1">
						委托人手机号：{{orderdetail.phone}}
					</view>
				</view>
				<view class="item_info">
					<view class="i1">
						收车人姓名：{{orderdetail.consignee}}
					</view>
					<view class="i1">
						收车人手机号：{{orderdetail.consign_phone}}
					</view>
				</view>
			</view>
			<view class="carInfo">
				<view class="carTitle">
					车辆信息
				</view>
				<view v-if="orderdetail.car_arr.length" class="carItem" v-for="(i,n) in orderdetail.car_arr" :key="n">
					<text>车辆{{n+1}}：{{i.chexing}}</text>估值{{i.baozhi}}万元
				</view>
			</view>
		</view>
		<view class="serveBox">
			<view class="serTitle">
				提送服务
			</view>
			<view class="serInfo">
				<text>上门提车：{{orderdetail.is_door_val==1?'上门取车':"送至网点"}}</text>送车上门：{{orderdetail.is_door_val==1?'上门取车':"送至网点"}}
			</view>
			<uv-divider></uv-divider>
			<view class="serTitle">
				其他信息
			</view>
			<view class="serInfo">
				<text>业务对接人：{{orderdetail.yw_user_name}}</text>手机号：{{orderdetail.yw_user_mobile}}
			</view>
			<uv-divider></uv-divider>
			<view class="serTitle">
				是否开票：{{orderdetail.invoice_status=='1'?'是':'否'}}
			</view>
		</view>
		<view v-if="orderdetail.hetong" class="invoiceBox" @click="contractBtn">
			<text>电子合同</text>
			<view class="lookInvoice" >
				查看电子合同
				<uv-icon name="arrow-right" color="#222222" size="12"></uv-icon>
			</view>
            <!--  -->
		</view>
		<view class="checkCarImg" >
			<view class="title_car">
				<text>验车照片</text>
				<view class="moreBox" @click="moreImg">
					更多<uv-icon name="arrow-right" color="#222222" size="12"></uv-icon>
				</view>

			</view>
           
			<view class="imgBox">
				<view class="imgItem" v-for="(i,n) in imgList" :key="i">
                    
                    
					<image   :src="i" mode=""></image>
				</view>
               
			</view>
			<!--添加照片-->
			<view class="addImgBox" v-if="orderdetail.is_yw=='1'">
				<view class="addImg" @click="addImgBtn">
					<uv-icon name="plus" color="#C7C7C7" size="28"></uv-icon>
				</view>
				点击添加验车图片和标题
			</view>
		</view>
		<view class="remarkBox">
			<text>备注</text>无
		</view>
		<!--运费-->
	<!-- 	<view class="moneyText" v-if="orderdetail.status>0">
			运费：{{orderdetail.total_amount}}元
		</view> -->
		<!--立即支付-->
		<view class="payMoney" v-if="orderdetail.status>0">
			<!-- <text>运费：{{orderdetail.total_amount}}元</text> -->
            <text>需支付：{{orderdetail.trans_amount}}元</text>
			<view class="payBtn" @click="toPay()" v-if="orderdetail.status==1">
				<image src="../../static/images/d4.png" mode=""></image>
				立即支付
			</view>
		</view>
		<!--电子合同弹窗-->
		<uv-modal ref="dzContract" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>电子合同</text>
						<uv-icon name="close-circle" size="26" @click="contractClose"></uv-icon>
					</view>
                    <view class="">
                        <image :src="orderdetail.hetong" mode=""></image>
                    </view>
				</view>
			</view>
		</uv-modal>
		<!--验车照片-->
		<uv-modal ref="checkCar" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>验车照片</text>
						<uv-icon name="close-circle" size="26" @click="carImgClose"></uv-icon>
					</view>
					<view class="imgAllBox">
						<view class="imgBox" v-for="i in imgList" :key="i">
							<template v-if="i.includes(',')">
							    <image v-for="(item,index) in i.split(',')" :src="item" mode="widthFix"></image>
							</template>
							<image v-else :src="i" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</uv-modal>
		<uv-modal ref="addCarImg" :showConfirmButton="false">
			<view class="contractBox">
				<view class="titleBox">
					<text>添加验车照片和标题</text>
					<uv-icon name="close-circle" size="26" @click="coleAddImg"></uv-icon>
				</view>
				<view class="iptBox">
					<uv-input placeholder="请输入验车标题" border="surround" v-model="uploadForm.title" ></uv-input>
				</view>
				<view class="uploadInfo">
                    <image v-if="uploadForm.image" :src="uploadForm.image" mode=""></image>
					<view class="addImg" v-else @click="uploadFile()">
						<uv-icon name="plus" color="#C7C7C7" size="28"></uv-icon>
					</view>
                    
					<text>点击添加验车图片</text>
				</view>
				<view class="sureBtn" @click="addCarImgdata">
					确定
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
                id:"",
                orderdetail:{},
                
                uploadForm:{
                    title:"",
                    image:"",
                    order_id:""
                },
                imgList:[],
                userInfo:{
                    group_id:"1"
                }
			};
		},
        onLoad(opt) {
            this.getUserInfo()  
            if(opt.id){
                this.id = opt.id
                this.getDetail()
                this.uploadForm.order_id =  opt.id
                this.getCartImg()
            }
        },
		methods: {
            async getUserInfo(){
             const {data} =  await this.$api.userinfo()
             this.userInfo= data
            },
            async  getDetail(){
              const {code,data}  = await  this.$api.orderdetail({id:this.id})
              console.log(data)
              if(code==1){
                  this.orderdetail = data
              }
            
            },
            toPay(){
                this.$api.createHetong({order_id: this.id }).then(res=>{
                    
                })
                this.$api.prepay({order_id: this.id }).then(res=>{
                    console.log(res)
                    uni.requestPayment({
                    	provider: "wxpay",
                    	appId: res.data.pay_data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                    	nonceStr: res.data.pay_data.nonceStr, // 随机字符串
                    	package: res.data.pay_data.package, // 固定值
                    	// "partnerid": res.data.appId,      // 微信支付商户号
                    	// "prepayid": res.data.appId,  // 统一下单订单号
                    	signType: 'MD5',
                    	timeStamp: res.data.pay_data.timeStamp || String(Date.now()), // 时间戳（单位：秒）
                    	paySign: res.data.pay_data.paySign, // 签名，这里用的 MD5/RSA 签名
                    	success(data) {
                    				
                    						
                    		uni.showToast({
                    			title: '支付成功',
                    			icon: "none"
                    		})
                            uni.switchTab({
                                url:'/pages/tabbar/myOrder'
                            })
                    	},
                    	fail(e) {
                    		uni.showToast({
                    			title: '支付失败',
                    			icon: "error"
                    		})
                    		console.log(e)
                    	}
                    
                    })
                })
                // uni.navigateTo({
                //     url:'/pages/pay/index?id='+this.orderdetail.id
                // })
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//添加照片
			addImgBtn() {
				this.$refs.addCarImg.open();
			},
			coleAddImg(){
				this.$refs.addCarImg.close();
			},
			//合同按钮
			contractBtn() {
                let vm =this
              uni.downloadFile({
              	url: this.orderdetail.hetong,
              	success: function(res) {
                      console.log(res)  
                    uni.openDocument({
                        filePath:res.tempFilePath,
                        fileType:'pdf',
                        showMenu:true,
                        success:function(res){
                            
                        }
                    })
              		
              	},
              	fail: function() {
              		return that.$util.Tips({
              			title: ''
              		});
              	}
              });
				// this.$refs.dzContract.open();
			},
			//合同弹窗关闭
			contractClose() {
				this.$refs.dzContract.close();
			},
			//更多照片
			moreImg() {
				this.$refs.checkCar.open();
			},
			//验证车弹窗关闭
			carImgClose() {
				this.$refs.checkCar.close();
			},
            async getCartImg(){
                    const {data}  =   await  this.$api.cartImage({order_id:this.id})
                    console.log(data)
                    this.imgList = data.list.image
                    
            },
            uploadFile (type, directory) {
              let vm = this
              uni.chooseImage({
                count: 1, //最多可以选择的图片总数
                // sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有
                // sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
                success: async (res) => {
                  let data = {
                    filePath: res.tempFilePaths[0],
                    formData: {
                      directory
                    },
                    header: {
                        // #ifdef MP
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // #endif
                      'Token': uni.getStorageSync('logintoken')
                    }
                  }
                  vm.$api.uploadImg(data).then(res => {
                        vm.uploadForm.image=res.fullurl
                  })
                },
              })
            },
            addCarImgdata(){
                    if(!this.uploadForm.title) return this.$utils.msg('请上传验车内容')
                    if(!this.uploadForm.image) return this.$utils.msg('请上传验车图片')
                    uni.showLoading({
                        title:'加载中'
                    })
                    this.$api.addCartImage(this.uploadForm).then(res=>{
                        uni.hideLoading()
                        
                        if(res.code==1){
                            this.coleAddImg()
                            this.getCartImg()
                            this.$utils.msg('添加成功')
                        }else{
                            this.$utils.msg(res.msg)
                        }
                    })
                    
            }
		}
	}
</script>

<style lang="scss" scoped>
	.paymentBox {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 97rpx;
        position: relative;
		.orderInfo {
			font-size: 24rpx;
			color: #000000;
			line-height: 61rpx;
			padding: 0rpx 20rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 600;

			.t2 {
				color: #D72031
			}
		}

		.addressBox {
			width: 750rpx;
			background-color: #FFFFFF;
			padding: 33rpx 20rpx 0rpx;

			.a_Title {
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 99rpx;
				margin-bottom: 26rpx;
				font-weight: 600;

				image {
					width: 166rpx;
					height: 17rpx;
				}
			}

			.a_info {
				width: 710rpx;
				
				background: #F5F5F5;
				border-radius: 6rpx;
				padding: 16rpx 0rpx 0rpx 25rpx;

				.item_info {
					line-height: 49rpx;
					display: flex;
					font-size: 26rpx;
					color: #222222;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfo {
				.carTitle {
					color: #000000;
					line-height: 49rpx;
					font-size: 24rpx;
					font-weight: 600;
				}

				.carItem {
					font-size: 26rpx;
					color: #222222;
					line-height: 50rpx;

					text {
						padding-right: 40rpx;
					}

				}
			}
		}

		.serveBox {
			margin-top: 15rpx;
			background-color: #FFFFFF;
			width: 750rpx;

			padding-bottom: 16rpx;

			.serTitle {
				font-size: 24rpx;
				color: #000000;
				line-height: 49rpx;
				padding-left: 26rpx;
				font-weight: 600;
			}

			.serInfo {
				padding-left: 22rpx;
				color: #222222;
				font-size: 26rpx;
				line-height: 50rpx;

				text {
					padding-right: 60rpx;
				}
			}
		}

		.invoiceBox {
			margin-top: 18rpx;
			width: 750rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: #222222;
			padding: 0rpx 25rpx;

			text {
				font-weight: 600;
				font-size: 24rpx;
				color: #000000;
			}

			.lookInvoice {
				display: flex;
				align-items: center;
			}
		}

		.checkCarImg {
			margin-top: 16rpx;
			background-color: #FFFFFF;
			width: 750rpx;
			// height: 306rpx;
			padding: 25rpx;

			.title_car {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #000000;
					font-weight: 600;
				}

				.moreBox {
					display: flex;
					color: #555555;
					font-size: 20rpx;
				}
			}

			.imgBox {
				display: flex;
				margin-top: 30rpx;
                flex-wrap: wrap;
				.imgItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 17rpx;
					font-size: 20rpx;
					color: #666666;
                    
					image {
						height: 162rpx;
						width: 163rpx;
						margin:0  0 16rpx 0 ;
					}
				}
			}

			.addImgBox {
				height: 108rpx;
				display: flex;
				align-items: center;
				color: #555555;
				font-size: 20rpx;
				margin-top: 27rpx;
			}

			
		}

		.remarkBox {
			width: 750rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #555555;
			padding-left: 23rpx;

			text {
				color: #000000;
				font-size: 24rpx;
				padding-right: 13rpx;
			}

		}
        .moneyText{
			margin-top: 20rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			color: #D72031;
			font-weight: 600;
			padding-left: 21rpx;
		}
		.payMoney{
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			height: 87rpx;
			display: flex;
			justify-content:space-between;
			background-color: #FFFFFF;
			align-items: center;
			padding: 0rpx 21rpx;
			text{
				font-size: 30rpx;
				color: #D72031;
				font-weight: 600;
			}
			.payBtn {
				width: 208rpx;
				height: 54rpx;
				background: rgba(39, 124, 192, 1);
				border-radius: 6rpx;
				color: #ffffff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 11rpx;
				}
			}
		}
		.contractBox {
			
			// height: 853rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0rpx 38rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}
			}

			.iptBox {
				margin-top: 33rpx;
			}

			.uploadInfo {
				margin-top: 14rpx;
				display: flex;
				align-items: center;
                image{
                    width: 109rpx;
                    height: 108rpx;
                    border-radius: 6rpx;
                    margin-right: 11rpx;
                }
			}
			.sureBtn{
				width: 597rpx;
				height: 59rpx;
				background: #277CC0;
				border-radius: 12rpx;
				cursor: pointer;
				line-height: 59rpx;
				margin: 0 auto;
				color:#FFFFFF;
				font-size: 26rpx;
				text-align: center;
				margin-top: 30rpx;
			}

			.infoItem {
				font-size: 26rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					display: inline-block;
					width: 260rpx;
				}
			}

			.addressInfo {
				width: 603rpx;
				margin: 0 auto;
				margin-top: 41rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
					color: #2E2E2E;
					font-weight: 600;
				}

				image {
					width: 166rpx;
					height: 17rpx;
					margin: 0rpx 60rpx;
				}
			}

			.timeInfo {
				width: 600rpx;
				height: 117rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				padding-left: 22rpx;
				padding-top: 10rpx;

				.tiem_info {
					display: flex;
					align-items: center;
					color: #222222;
					font-size: 26rpx;
					line-height: 49rpx;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfoBox {
				margin-left: 23rpx;
				font-size: 22rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					padding-right: 20rpx;
				}
			}

			.imgAllBox {
				height: 800rpx;
				width: 600rpx;
				// overflow-x: hidden;
                margin-top: 20rpx;
				overflow: auto;
			}

			.imgBox {
				image {
                    width: 100%;
					border-radius: 6rpx;
				}

				.imgInfo {
					font-size: 26rpx;
					color: #222222;
                    margin: 26rpx 0;
					justify-content: space-between;
				}
			}
		}
        .addImg {
        	width: 109rpx;
        	height: 108rpx;
        	background: #F5F5F5;
        	border-radius: 6rpx;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	margin-right: 11rpx;
        }
	}
</style>